<template>
  <input type="text" v-focus />
  <br />
</template>

<script>
// 当我们需要对dom元素进行底层操作的时候使用自定义指令
export default {
  directives: {
    focus: {
      created(el, bindings, vnode, preVnode) {
        // 在绑定元素的attribute或者事件监听器被应用之前调用
        console.log('组件created')
      },
      beforeMount(el, bindings, vnode, preVnode) {
        // 当指令第一次绑定到元素并且挂载到父组件之前调用
        console.log('组件beforeMount')
      },
      mounted(el, bindings, vnode, preVnode) {
        // 挂载到父组件之后调用
        console.log('组件mounted', el)
        el.focus()
      },
      beforeUpdate(el, bindings, vnode, preVnode) {
        // 在更新组件的VNODE之前调用
        console.log('组件beforeUpdate')
      },
      beforeUnmount(el, bindings, vnode, preVnode) {
        // 在卸载其绑定的父组件之前调用
        console.log('组件beforeUnmount')
      },
      unmounted(el, bindings, vnode, preVnode) {
        // 只会调用一次
        console.log('组件unmounted')
      },
    },
  },
}
</script>

<style scoped></style>
